<script setup>
import { computed } from "vue"
import SelectCurrency from "@/components/Selects/Currency"
import SelectsShopCascade from "@/components/Selects/SelectsShopCascade"
import "./index.scss"
import DkInputNumber from "@/components/DKComponents/InputNumber/index.vue"
const props = defineProps({
  formData: Object,
  modelValue: {
    type: Object,
  },
})
const formData = computed({
  get: () => {
    return props.modelValue
  },
  set: (value) => {
    emit("update:modelValue", value)
  },
})

// const handleCascadeChange = value => {
//   const { platform_id, site, shop_id } = value
//   formData.value.platform_id = platform_id
//   formData.value.site = site
//   formData.value.shop_id = shop_id
// }

const handleClearOrderNo = () => {
  formData.value.order_no = ""
}
// const inputBlur = (e) => {
//   if (Number(formData.value[e]) == 0) formData.value[e] = ''
// }
</script>

<template>
  <el-form-item label="系统订单号：">
    <el-input v-model="formData.order_no" class="input" type="textarea" clearable :rows="5" placeholder="系统订单号,一行一个" />
    <el-link type="danger" v-show="formData.order_no" @click="handleClearOrderNo" :underline="false" class="labelButton ml-2">清除 </el-link>
  </el-form-item>
  <el-form-item label="订单平台：">
    <SelectsShopCascade v-model:platform="formData.platform_id" v-model:site="formData.site" v-model:shop="formData.shop_id" :multiple="false" />
  </el-form-item>
  <el-form-item label="订单来源：">
    <VXSelect dictionary="build_order_type" v-model="formData.order_source" clearable />
  </el-form-item>
  <el-form-item label="订单状态：">
    <VXSelect dictionary="order_status" placeholder="订单状态" multiple collapse-tags clearable v-model="formData.order_status" />
  </el-form-item>
  <el-form-item label="新建订单原因：">
    <VXSelect dictionary="new_order_reason" placeholder="新建订单原因" multiple collapse-tags clearable v-model="formData.reason" />
  </el-form-item>
  <el-form-item label="订单支付金额：">
    <VGroup>
      <DkInputNumber v-model="formData.order_pay_start_price" :controls="false" :precision="2" placeholder="最低" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <DkInputNumber v-model="formData.order_pay_end_price" :precision="2" :controls="false" placeholder="最高" />
      <SelectCurrency v-model="formData.order_pay_currency" style="width: 80px" value-key="label" placeholder="RMB" />
    </VGroup>
  </el-form-item>
  <el-form-item label="产品总额：">
    <VGroup>
      <DkInputNumber v-model="formData.product_start_price" :controls="false" :precision="2" placeholder="最低" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <DkInputNumber v-model="formData.product_end_price" :precision="2" :controls="false" placeholder="最高" />
      <SelectCurrency v-model="formData.product_currency" style="width: 80px" value-key="label" placeholder="RMB" />
    </VGroup>
  </el-form-item>
  <el-form-item label="运费收入：">
    <VGroup>
      <DkInputNumber v-model="formData.freight_start_price" :controls="false" :precision="2" placeholder="最低" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <DkInputNumber v-model="formData.freight_end_price" :precision="2" :controls="false" placeholder="最高" />
      <SelectCurrency v-model="formData.freight_currency" style="width: 80px" value-key="label" placeholder="RMB" />
    </VGroup>
  </el-form-item>

  <el-form-item label="ebay订单站点：">
    <VXSelect dictionary="ebay_site" placeholder="ebay订单站点" multiple filterable collapse-tags clearable v-model="formData.ebay_site" />
  </el-form-item>
  <el-form-item>
    <template #label>
      <span>
        <el-tooltip class="box-item" effect="dark" content="部分匹配，如果勾选多个，只要订单类型存在其中一个就符合条件！" placement="top">
          <div class="dk-iconfont icon-QuestionFilled"></div>
        </el-tooltip>
        亚马逊平台：
      </span>
    </template>
    <VCheckboxGroup dictionary="order_strategy_amazon_order_type" v-model="formData.platform_order_type.amazon" />
  </el-form-item>
  <el-form-item>
    <template #label>
      <span style="display: flex; align-items: center">
        <el-tooltip class="box-item" effect="dark" content="部分匹配，如果勾选多个，只要订单类型存在其中一个就符合条件！" placement="top">
          <div class="dk-iconfont icon-QuestionFilled"></div>
        </el-tooltip>
        ebay平台：
      </span>
    </template>
    <VCheckboxGroup dictionary="order_strategy_ebay_order_type" v-model="formData.platform_order_type.ebay" />
  </el-form-item>
</template>
<style scoped lang="scss"></style>
